<template>
  <div class="novel-list-container">
    <div class="search-bar">
      <el-input
        v-model="searchFilters.q"
        placeholder="按书名模糊查询"
        class="search-input"
        @keyup.enter="performSearch"
      />
      <el-select v-model="searchFilters.category" placeholder="分类" clearable class="search-select">
        <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="searchFilters.status" placeholder="状态" clearable class="search-select">
        <el-option v-for="item in statuses" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button type="primary" @click="performSearch">搜索</el-button>
    </div>

    <el-table :data="data" v-loading="loading" @row-click="goToDetail" row-class-name="clickable-row">
      <el-table-column prop="novel_name" label="书名" />
      <el-table-column prop="Author.name" label="作者" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="status" label="状态" />
    </el-table>
    <app-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @update:current-page="handlePageChange"
      @update:page-size="handleSizeChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCRUD } from '@/composables/useCRUD'
import AppPagination from '@/components/AppPagination.vue'

const router = useRouter()

const searchFilters = ref({ q: '', category: '', status: '' })
const categories = ref(['玄幻', '武侠', '都市', '历史', '科幻'])
const statuses = ref(['连载中', '已完结'])

// 只需要提供API端点，即可获得所有数据和方法！
const { 
  data, 
  loading, 
  pagination, 
  handleSearch, 
  handlePageChange, 
  handleSizeChange 
} = useCRUD('/public/novels') // 假设获取小说的API是 /novels

const performSearch = () => {
  handleSearch(searchFilters.value)
}

const goToDetail = (row) => {
  // 检查是否有文本被选中，以避免在复制文本时触发导航
  const selection = window.getSelection().toString();
  if (selection.length === 0) {
    router.push({ name: 'novel-detail', params: { id: row.novel_id } });
  }
}
</script>

<style scoped>
.novel-list-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.search-select {
  width: 150px;
}

:deep(.clickable-row) {
  cursor: pointer;
}
</style>
